// @flow

import * as React from 'react';
import Layer from '../../components/SimpleLayer/Layer';
import {clearTag} from '../../modules/utils';
import SelectNavHOC from '../SelectNavHOC';
import ContentSlideIn from '../ContentSlideIn';
import SlideInTr from '../SlideInTr';
import { SGusersList,SGremoveUser,SGaddUser } from '../../actions/users.action';
import { connect } from 'react-redux';

type usr = {
	id: string,
	name: string,
	pswd: string,
	admin: string|number,
	time: string,
	books: ?string
}
type Props = {
	UsersList: Function,
	selectNav: Function,
	user: Object,
	users: Array<usr>,
	addUser: Function,
	removeUser: Function
}

@SelectNavHOC
@connect(mapStateToProps,mapDispatchToProps)
export default class Users extends React.Component<Props> {
	componentDidMount(){
		this.props.UsersList({
			token:this.props.user.token
		});
		this.props.selectNav('um');
	}
	showLayer(){
		let $this=this;
		Layer({
			width:350,
			height:260,
			title:'新增用户',
			content:`
				<div class="atr"><span class="red">*</span>用户名<span style="visibility:hidden">啊</span>：&nbsp;&nbsp;<input type="text" class="name inpt ease3" /></div>
				<div class="atr"><span class="red">*</span>密<span style="visibility:hidden">啊</span><span style="visibility:hidden">啊</span>码：&nbsp;&nbsp;<input type="password" class="pswd inpt ease3" /></div>
				<div class="atr"><span class="red">*</span>确认密码：&nbsp;&nbsp;<input type="password" class="pswd1 inpt ease3" /></div>
			`,
			onShow(){
				clearTag();
			},
			onOK(){
				let name: any =document.querySelector('.name');
				let pswd: any =document.querySelector('.pswd');
				let pswd1: any =document.querySelector('.pswd1');
				if (!name.value) {
					name.focus();
					return;
				}
				if (!pswd.value) {
					pswd.focus();
					return;
				}
				if (!pswd1.value||pswd.value!==pswd1.value) {
					pswd1.focus();
					return;
				}
				
				$this.props.addUser({
					name:name.value,
					pswd:pswd.value
				});
				this.delete();
			}
		});
	}
	removeUser(id: string): void{
		let $this=this;
		Layer({
			width:350,
			height:200,
			content:'<div style="line-height: 80px;font-size: 14px;color: #666;text-align: center;">确认删除吗？</div>',
			onOK(){
				$this.props.removeUser({id});
				this.delete();
			}
		});
	}
	render(): React.Node {
		let {
			users
		} = this.props;
		return (
			<div className="users">
				<div className="pagectrl">
					<div className="fr btn btn-primary ease3" onClick={()=>this.showLayer()}><i className="iconfont icon-add"></i>新增用户</div>
				</div>
				<div className="table">
					<ContentSlideIn>
						<table>
							<thead>
								<tr>
									<th align="center" width={80}>序号</th>
									<th width={260}>用户名</th>
									<th width={100}>管理员权限</th>
									<th width={100}>电子书数量</th>
									<th align="center" width={150}>操作</th>
									<th></th>
								</tr>
							</thead>
							<tbody>
								{
									users.length?
									users.map((user,i)=>{
										return (
											<SlideInTr key={user.id} item={user}>
												<td align="center">{i+1}</td>
												<td>{user.name}</td>
												<td align="center">{['否','是'][Number(user.admin)||0]}</td>
												<td align="center">{user.books||0}</td>
												<td align="center">
													<span className="item-ctrl ease3" onClick={()=>this.removeUser(user.id)}>删除</span>
												</td>
												<td></td>
											</SlideInTr>	
										);
									}):
									<tr><td colSpan={6}><div className="nodata">暂无数据</div></td></tr>
								}
							</tbody>
						</table>
					</ContentSlideIn>
				</div>
			</div>
		);
	}
}

function mapStateToProps(state) {
	return {
		users: state.Users.users.reverse()
	}
}
function mapDispatchToProps(dispatch){
	return {
		UsersList: data => dispatch(SGusersList(data)),
		removeUser: data => dispatch(SGremoveUser(data)),
		addUser: data => dispatch(SGaddUser(data))
	}
}

